<template>
	<view class="tally-history-record">
		<!-- 分享 -->
		<button class="share-box" open-type="share">分<br />享<br />记<br />录</button>
		<view class="date-range">
			<uni-datetime-picker v-model="range" type="daterange" :clear-icon="false" :border="false"
				@change="maskClick" />
		</view>

		<!-- 历史点检记录 -->
		<view class="work-list">

			<view class="screen-kpi-section">
				<view class="record-kpi-type" @click.stop="handleToggleProject">
					<text class="record-kpi-type-text">{{currentProjectName}}</text>
					<van-icon class="arrow-icon" name="arrow-down" />
				</view>

				<view class="record-kpi-type member" @click.stop="handleToggleRole">
					<text class="record-kpi-type-text">{{currentRoleName}}</text>
					<van-icon class="arrow-icon" name="arrow-down" />
				</view>

				<view class="record-kpi-type member" @click.stop="handleToggleMember">
					<text class="record-kpi-type-text">{{currentMemberName}}</text>
					<van-icon class="arrow-icon" name="arrow-down" />
				</view>

				<view class="record-kpi-type member" @click.stop="handleToggleResult">
					<text class="record-kpi-type-text">{{currentResultName}}</text>
					<van-icon class="arrow-icon" name="arrow-down" />
				</view>
			</view>
			<view>
				<view class="no-work-list-tip" v-if="!isHistoryRecordShow">
					<image class="no-data-img" src="../../static/no-data.png" mode="widthFix"></image>
					<p class="tips-text">无点检记录</p>
				</view>
				<view class="work-item" v-else v-for="(item, index) in historyRecordList" :key="index">
					<view class="work-item-user-date">
						<view class="work-item-user">
							<view class="work-item-user-avatar">
								<img class="user-avatar" :src="item.user.avatarUrl">
							</view>
							<view class="user-name">{{item.user.realName}}</view>
						</view>
						<view class="work-item-icon" :class="{'undone': item.result == 0}">
							<text>{{item.result == 1 ? '已完成':'未完成'}}</text>
						</view>
					</view>
					<view class="work-item-content">
						<view class="work-item-content-header" @click="handleRecord(item)">
							<view class="work-item-right-content">
								<view class="work-item-title">
									<view class="word-item-title-text">{{ item.items }}</view>
								</view>
							</view>
						</view>

						<view class="work-item-detail-imgs">
							<view class="item-detail-img" v-if="item.imgs.length > 1"
								v-for="(iItem, iIndex1) in item.imgs" :key="iIndex1">
								<image class="item-detail-img-style" v-if="iItem.type == 'image'"
									@tap.stop="ViewImage(item.imgs, iIndex1)" :src="iItem.imgName" mode="aspectFill">
								</image>
								<view class="item-detail-video-style" v-else>
									<image class="tally-img" :src="iItem.cover" mode="aspectFill" />
									<view class="play-icon-bg" @tap.stop.prevent="playVideo(iItem)">
										<van-icon class="play-icon" name="play-circle-o" />
									</view>
								</view>
							</view>

							<view class="item-detail-img-only" v-else v-for="(iItem, iIndex2) in item.imgs"
								:key="iIndex2">
								<image class="only-item-detail-img" v-if="iItem.type == 'image'"
									@tap.stop="ViewImage(item.imgs, iIndex2)"
									:style="{'width': iItem.width + 'px', 'height': iItem.height + 'px'}"
									:src="iItem.imgName" mode="widthFix">
								</image>
								<view class="only-item-detail-video"
									:style="{'width': iItem.width + 'px', 'height': iItem.height + 'px'}" v-else>
									<image class="tally-img" :src="iItem.cover" mode="aspectFill" />
									<view class="play-icon-bg" @tap.stop.prevent="playVideo(iItem)">
										<van-icon class="play-icon" name="play-circle-o" />
									</view>
								</view>
							</view>
						</view>
						<view class="work-item-detail-remark" v-if="item.remark">
							<view class="remark">{{item.remark}}</view>
						</view>
						<view class="work-item-detail-type">
							<view class="work-item-detail-text">
								<van-icon class="work-item-text-icon" name="points" />
								<view class="work-item-text-box">{{ item.standard }}</view>
							</view>
							<view class="work-item-type-text">
								<van-icon class="work-item-text-icon" name="guide-o" />
								<view class="work-item-text-box">{{ item.class }}</view>
							</view>
							<view class="work-item-frequency-text">
								<van-icon class="work-item-text-icon" name="underway-o" />
								<view class="work-item-text-box">{{ item.frequency }}</view>
							</view>
						</view>
						<view class="work-item-date">{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- loading加载提示处 -->
		<view class="loading-box" v-show="isLoadMore">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<view class="height"></view>

		<!-- 切换项目类别popup -->
		<van-popup :show="projectTypePopShow" position="bottom">
			<van-picker show-toolbar :columns="projectTypeList" @confirm="onProjectTypeConfirm"
				@cancel="projectTypePopShow = false" />
		</van-popup>
		<!-- 切换岗位popup -->
		<van-popup :show="rolePopShow" position="bottom">
			<van-picker show-toolbar :columns="roleTypeList" @confirm="onRoleConfirm" @cancel="rolePopShow = false" />
		</van-popup>

		<!-- 切换成员popup -->
		<van-popup :show="memberPopShow" position="bottom">
			<van-picker show-toolbar :columns="memberTypeList" @confirm="onMemberConfirm"
				@cancel="memberPopShow = false" />
		</van-popup>

		<!-- 切换结果popup -->
		<van-popup :show="resultPopShow" position="bottom">
			<van-picker show-toolbar :columns="resultTypeList" @confirm="onResultConfirm"
				@cancel="resultPopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	import getDateTime from '@/common/getDateTime.js';
	import removeDuplication from '@/common/removeDuplication.js';
	export default {
		data() {
			return {
				range: [],
				historyRecordList: [],
				isHistoryRecordShow: true,
				nowTime: '',
				beginDate: '',
				endDate: '',
				historyRecordLoading: false,
				projectList: [],
				currentProjectName: "全部项目",
				currentProjectId: "0",
				projectTypePopShow: false,
				projectTypeList: [],
				projectTypeIdList: [],
				projectTypeValue: "",
				projectTypeIdValue: "",
				currentRoleName: "全部岗位",
				rolePopShow: false,
				memberList: [],
				memberIdList: [],
				roleTypeList: [],
				memberTypeList: [],
				memberTypeIdList: [],
				memberPopShow: false,
				memberTypeValue: '',
				memberIdValue: "",
				currentMemberName: "-",
				currentMemberId: [],
				rqsData: {
					"paged": {
						"pageSize": 9999,
						"pageIndex": 1,
						"orderBy": "asc"
					},
					"shopId": "",
					"userId": [
						"0"
					],
					"tempId": "0",
					"dateRange": {
						"beginDate": "",
						"endDate": ""
					},
					"result": 3
				},
				currentResultName: "全部状态",
				currentResultId: 3,
				resultPopShow: false,
				resultTypeList: ['全部状态', '已完成', '未完成'],
				shopId: "",
				optionsData: {},
				paged: {
					"pageSize": 5,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
			}
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
			},
		},
		onShow() {
			// let recordHideData = uni.getStorageSync("recordHideData");
			// if (recordHideData) {
			// 	this.currentMemberId = recordHideData.currentMemberId;
			// 	this.currentProjectId = recordHideData.currentProjectId;
			// 	this.beginDate = recordHideData.beginDate;
			// 	this.endDate = recordHideData.endDate;
			// 	this.currentResultId = recordHideData.currentResultId;
			// 	this.currentMemberName = recordHideData.currentMemberName;
			// 	this.currentProjectName = recordHideData.currentProjectName;
			// 	this.currentRoleName = recordHideData.currentRoleName;
			// 	this.currentResultName = recordHideData.currentResultName;
			// 	this.range = [recordHideData.beginDate, recordHideData.endDate];
			// 	// this.handleGetMemberList();
			// 	this.handleGetHistoryRecordList('hide');
			// }
			const isImageView = uni.getStorageSync("isImageView");
			if (isImageView == 'isImage') {
				uni.setStorageSync("isImageView", 'notImage');
				const currentRecordList = uni.getStorageSync("currentRecordList");
				this.historyRecordList = currentRecordList;
			} else if (isImageView == 'notImage') {
				console.log('没有isImageView');
				this.handleGetHistoryRecordList('hide');
			}
			console.log('onShow...');
		},
		onLoad() {
			this.handleGetProjectList();
			this.handleGetMemberList();
			var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.nowTime = timeStr;
			this.range = [timeStr, timeStr];
			this.beginDate = timeStr;
			this.rqsData.dateRange.beginDate = timeStr;
			this.endDate = timeStr;
			this.rqsData.dateRange.endDate = timeStr;
			let recordHideData = uni.getStorageSync("recordHideData");
			if (recordHideData) {
				recordHideData.beginDate = timeStr;
				recordHideData.endDate = timeStr;
				uni.setStorageSync("recordHideData", recordHideData);
			}
			this.handleGetCurrentRecordList();
			console.log('onLoad...');
		},
		onHide() {
			console.log('record onHide');
			let {
				currentMemberId,
				currentMemberName,
				currentProjectName,
				currentProjectId,
				currentRoleName,
				currentResultName,
				currentResultId,
				beginDate,
				endDate
			} = this;
			let data = {
				currentMemberId,
				currentMemberName,
				currentProjectName,
				currentProjectId,
				currentRoleName,
				currentResultName,
				currentResultId,
				beginDate,
				endDate
			};
			uni.setStorageSync("recordHideData", data);
			console.log(data);
		},
		methods: {
			maskClick(e) {
				let recordHideData = uni.getStorageSync("recordHideData");
				this.beginDate = e[0] + " 00:00:00";
				this.endDate = e[1] + " 00:00:00";
				console.log('Click:', this.beginDate, this.endDate);
				if (recordHideData) {
					recordHideData.beginDate = e[0] + " 00:00:00";
					recordHideData.endDate = e[1] + " 00:00:00";
					uni.setStorageSync("recordHideData", recordHideData);
				}

				getApp().showLoading();
				this.paged.pageIndex = 1;
				this.handleGetHistoryRecordList('date');
			},
			// 获取当前登录账号的点检记录
			handleGetCurrentRecordList() {
				getApp().showLoading();
				const tokenInfo = uni.getStorageSync("tokenInfo");
				var that = this;
				apiRqs._getUser().then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						let data = res.data;
						that.currentMemberId = [
							tokenInfo.userId
						];
						let userName = "";
						for (let i = 0; i < data
							.length; i++) {
							if (tokenInfo.userId ==
								data[i].userId) {
								userName = data[i]
									.realName;
							}
						}
						that.currentMemberName = userName;

						that.$nextTick(() => {
							that.handleGetHistoryRecordList();
						})
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 获取项目列表
			async handleGetProjectList() {
				var that = this;
				await apiRqs._getShopTemplateList({
					"pageSize": 999,
					"pageIndex": 1,
					"orderBy": ""
				}).then((res) => {
					if (res.code == 200) {
						let projectTypeList = [];
						let projectTypeIdList = [];
						let data = res.data.data;
						that.projectList = data;
						that.currentProjectId = "0";
						for (let i = 0; i < data.length; i++) {
							projectTypeList.push(data[i].name);
							projectTypeIdList.push(data[i].id);
						}
						projectTypeList.unshift("全部项目");
						projectTypeIdList.unshift("0");
						that.projectTypeList = projectTypeList;
						that.projectTypeIdList = projectTypeIdList;
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 获取用户列表
			handleGetMemberList() {
				var that = this;
				apiRqs._getUser().then((res) => {
					console.log('成员列表', res);
					if (res.code == 200) {
						that.memberList = res.data;
						let memberList = [];
						let memberIdList = [];
						let roleList = [];
						let roleIdList = [];
						let data = res.data;
						for (let i = 0; i < data.length; i++) {
							memberList.push(data[i].realName);
							memberIdList.push(data[i].userId);
							roleList.push(data[i].roleName);
						}
						let newRoleList = removeDuplication.unique(roleList);
						newRoleList.unshift("全部岗位");
						that.roleTypeList = newRoleList;
						memberList.unshift("全部人员");
						memberIdList.unshift("0");
						that.memberTypeList = memberList;
						that.memberTypeIdList = memberIdList;
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			// 切换项目
			handleToggleProject() {
				this.projectTypePopShow = true;
			},
			onProjectTypeConfirm(value) {
				console.log(value);
				this.projectTypeValue = value.detail.value;
				this.projectTypeIdValue = this.projectTypeIdList[value.detail.index];
				this.currentProjectName = value.detail.value;
				this.currentProjectId = this.projectTypeIdList[value.detail.index];
				this.projectTypePopShow = false;
				getApp().showLoading();
				this.paged.pageIndex = 1;
				this.handleGetHistoryRecordList('project');
			},
			// 切换岗位
			handleToggleRole() {
				this.rolePopShow = true;
			},
			onMemberConfirm(value) {
				console.log(value);
				this.memberTypeValue = value.detail.value;
				this.memberIdValue = this.memberTypeIdList[value.detail.index];
				this.currentMemberName = value.detail.value;
				this.currentMemberId = [this.memberTypeIdList[value.detail.index]];
				this.memberPopShow = false;
				getApp().showLoading();
				this.paged.pageIndex = 1;
				this.handleGetHistoryRecordList('member');
			},
			// 切换成员
			handleToggleMember() {
				this.memberPopShow = true;
			},
			onRoleConfirm(value) {
				console.log(value);
				this.currentRoleName = value.detail.value;
				let memberTypeList = [];
				let memberTypeIdList = [];
				if (value.detail.value == '全部岗位') {
					for (let i = 0; i < this.memberList.length; i++) {
						memberTypeList.push(this.memberList[i].realName);
						memberTypeIdList.push(this.memberList[i].userId);
					}
					memberTypeList.unshift("全部人员");
					memberTypeIdList.unshift("0");
				} else {
					for (let i = 0; i < this.memberList.length; i++) {
						if (value.detail.value === this.memberList[i].roleName) {
							memberTypeList.push(this.memberList[i].realName);
							memberTypeIdList.push(this.memberList[i].userId);
						}
					}
				}

				this.memberTypeList = memberTypeList;
				this.memberTypeIdList = memberTypeIdList;
				this.currentMemberId = memberTypeIdList;
				this.currentMemberName = "全部人员";
				this.rolePopShow = false;
				getApp().showLoading();
				this.paged.pageIndex = 1;
				this.handleGetHistoryRecordList('role');
			},
			// 切换状态
			handleToggleResult() {
				this.resultPopShow = true;
			},
			onResultConfirm(value) {
				if (value.detail.value == '全部状态') {
					this.currentResultId = 3;
				} else if (value.detail.value == '已完成') {
					this.currentResultId = 1;
				} else if (value.detail.value == '未完成') {
					this.currentResultId = 0;
				}
				this.currentResultName = value.detail.value;
				this.resultPopShow = false;
				getApp().showLoading();
				this.paged.pageIndex = 1;
				this.handleGetHistoryRecordList('result');
			},
			// 获取历史点检记录
			handleGetHistoryRecordList(type) {
				var that = this;
				let rqs = {
					"paged": this.paged,
					"shopId": this.shopId,
					"userId": this.currentMemberId,
					"tempId": this.currentProjectId,
					"dateRange": {
						"beginDate": this.beginDate,
						"endDate": this.endDate
					},
					"result": this.currentResultId,
				};
				apiRqs._getHistoryRecordList(rqs).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						let data = JSON.parse(JSON.stringify(res.data.data));

						if (data.length > 0) {
							for (let i = 0; i < data.length; i++) {
								for (let y = 0; y < data[i].imgs.length; y++) {

									let suffix = data[i].imgs[y].imgName.substring(data[i].imgs[y].imgName
										.length - 3, data[i].imgs[y].imgName.length);
									if (suffix == 'mp4') {
										data[i].imgs[y].type = 'video';
										if (data[i].imgs[y].width < data[i].imgs[y].height) {
											data[i].imgs[y].width = (data[i].imgs[y].width / (data[i].imgs[y]
												.height /
												350)).toFixed(0) * 1;
											data[i].imgs[y].height = 240;
										} else if (data[i].imgs[y].width > data[i].imgs[y].height) {

											data[i].imgs[y].height = (data[i].imgs[y].height / (data[i].imgs[y]
												.width /
												320)).toFixed(0) * 1;
											data[i].imgs[y].width = 240;
										}
									} else {
										data[i].imgs[y].type = 'image';
										// 图片等比缩放
										if (data[i].imgs[y].width > 230 && data[i].imgs[y].width >= data[i]
											.imgs[y]
											.height) {

											data[i].imgs[y].height = (data[i].imgs[y].height / (data[i].imgs[y]
												.width /
												230)).toFixed(0) * 1;
											data[i].imgs[y].width = 230;
										} else if (data[i].imgs[y].width > 230 && data[i].imgs[y].width <=
											data[i]
											.imgs[y]
											.height) {

											data[i].imgs[y].width = (data[i].imgs[y].width / (data[i].imgs[y]
												.height /
												160)).toFixed(0) * 1;
											data[i].imgs[y].height = 160;
										} else if (data[i].imgs[y].width <= 230 && data[i].imgs[y].width >=
											data[i]
											.imgs[y]
											.height) {

											data[i].imgs[y].width = data[i].imgs[y].width;
											data[i].imgs[y].height = data[i].imgs[y].height;
										} else if (data[i].imgs[y].width <= 230 && data[i].imgs[y].width <=
											data[i]
											.imgs[y]
											.height && data[i].imgs[y].height > 160) {
											data[i].imgs[y].width = (data[i].imgs[y].width / (data[i].imgs[y]
												.height /
												160)).toFixed(0) * 1;
											data[i].imgs[y].height = 160;
										} else if (data[i].imgs[y].width <= 230 && data[i].imgs[y].width <=
											data[i]
											.imgs[y]
											.height && data[i].imgs[y].height < 160) {
											let rate = 160 / data[i].imgs[y].height;
											data[i].imgs[y].width = (data[i].imgs[y].width * rate).toFixed(0) *
												1;
											data[i].imgs[y].height = 160;
										}
									}
								}
							}
							if (data.length < that.paged.pageSize) {
								that.isLoadMore = true;
								that.loadStatus = 'nomore';
							} else if (data.length == that.paged.pageSize) {
								that.isLoadMore = false;
								that.loadStatus = 'more';
							}
							that.isHistoryRecordShow = true;
						} else if (data.length == 0 && that.paged.pageIndex == 1) {
							that.isLoadMore = false;
							that.isHistoryRecordShow = false;
						} else if (data.length == 0 && that.paged.pageIndex > 1) {
							that.isLoadMore = true;
							that.loadStatus = 'nomore';
						}
						console.log('历史点检记录', data);
						if (type == 'project' || type == 'role' || type == 'member' || type == 'result' ||
							type == 'date' || type == 'hide') {
							that.historyRecordList = data;
						} else {
							that.historyRecordList = that.historyRecordList.concat(data);
						}
					} else {
						getApp().showToast(res.msg);
						that.isLoadMore = false;
					}
				}).catch((err) => {
					console.log('err', err);
					that.isLoadMore = false;
				})
			},

			// 预览图片
			ViewImage(imgs, index) {
				var dataArray = [];
				for (var i = 0; i < imgs.length; i++) {
					dataArray[i] = imgs[i].imgName;
				}
				uni.setStorageSync("isImageView", 'isImage');
				uni.setStorageSync("currentRecordList", this.historyRecordList);
				uni.previewImage({
					urls: dataArray,
					current: dataArray[index]
				});
			},
			// 播放视频
			playVideo(iItem) {
				wx.previewMedia({
					sources: [{
						url: iItem.imgName,
						type: "video",
					}]
				})
			},
			handleRecord(item) {
				uni.setStorageSync("doWorkCompletedInfo", item);
				uni.navigateTo({
					url: "/packageA/workbench/completed-detail?isHistory=true"
				})
			},
			// 分享当前用户已完成点检内容给好友
			onShareAppMessage(options) {
				return this.getShareData(options);
			},
			getShareData(options) {
				let tokenInfo = uni.getStorageSync("tokenInfo");
				let {
					beginDate,
					endDate,
					currentMemberId,
					currentMemberName,
					shopId
				} = this;
				let title = "";
				if (beginDate == endDate) {
					let newBeginDate = endDate.split(" ")[0];
					title = `【${newBeginDate}】${currentMemberName}的点检记录`;
				} else {
					let newBeginDate = beginDate.split(" ")[0];
					let newEndDate = endDate.split(" ")[0];
					title = `【${newBeginDate}至${newEndDate}】${currentMemberName}的点检记录`;
				}
				let imageUrl = "";
				let path =
					`/packageA/workbench/share-record?currentMemberId=${currentMemberId}&shopId=${shopId}&beginDate=${beginDate}&endDate=${endDate}&currentMemberName=${currentMemberName}`;

				// 转发分享加积分
				apiRqs._shareRecordAddIntegral().then((res) => {
					console.log('分享增加积分', res);
				})

				return {
					title,
					imageUrl,
					path
				};
			},
			onPullDownRefresh() {
				console.log('refresh');
				this.handleGetHistoryRecordList('hide');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},

		},
		onReachBottom() { //上拉触底函数
			console.log('滑到底啦！');
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.paged.pageIndex += 1;
				this.handleGetHistoryRecordList();
			}
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.tally-history-record {
		.share-box {
			position: fixed;
			right: 0px;
			bottom: 70px;
			border-top-left-radius: 6px;
			border-bottom-left-radius: 6px;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			background-color: #008aff;
			box-sizing: border-box;
			color: #fff;
			font-size: 14px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
			line-height: unset;
			border: none;
			z-index: 99;
			padding: 6px 10px;
			text-align: center;
		}

		.height {
			height: 20px;
		}

		.loading-box {
			margin-top: 10px;
			font-size: 12px;
		}

		.work-list {
			.screen-kpi-section {
				margin: 15px;
				font-size: 14px;
				color: #A0A2AE;
				display: flex;
				align-items: center;

				.record-kpi-type {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;

					.record-kpi-type-text {
						flex: 1;
						min-width: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					&.member {
						margin-left: 20px;
					}

					.arrow-icon {
						width: 12px;
						flex: 0 0 12px;
						font-size: 12px;
						margin-left: 3px;
					}
				}


			}

			.no-work-list-tip {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-size: 14px;
				color: #999;
				margin: 40px 0;

				.no-data-img {
					width: 120px;
					margin-top: 30px;
				}

				.tips-icon {
					font-size: 36px;
				}

				.tips-text {
					margin-top: 20px;
				}
			}

			.work-item {
				// display: flex;
				background-color: #fff;
				padding: 15px;
				margin-top: 20px;

				&:first-child {
					margin-top: 10px;
				}

				.work-item-user-date {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.work-item-user {
						flex: 1;
						display: flex;
						align-items: center;

						.work-item-user-avatar {
							width: 40px;
							flex: 0 0 40px;
							height: 40px;
							border-radius: 50%;
							border: 1px solid #eee;

							.user-avatar {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.user-name {
							flex: 1;
							min-width: 0;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 14px;
							color: #000;
							margin-left: 10px;
						}
					}

					.work-item-icon {
						width: 53px;
						height: 21px;
						flex: 0 0 53px;
						font-size: 11px;
						text-align: center;
						line-height: 21px;
						background-color: #008aff;
						border: 1px solid #008aff;
						color: #fff;
						border-radius: 40px;

						&.undone {
							background-color: transparent;
							color: #008aff;
						}
					}


				}

				&:first-child {
					margin-top: 12px;
				}



				.work-item-content {
					flex: 1;
					min-width: 0;
					display: flex;
					flex-direction: column;
					margin-left: 3px;

					.work-item-detail-type {
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 15px;

						.work-item-detail-text,
						.work-item-type-text,
						.work-item-frequency-text {
							flex: 1;
							min-width: 0;
							font-size: 12px;
							color: rgba(0, 0, 0, 0.5);
							padding-right: 20px;
							box-sizing: border-box;
							display: flex;
							align-items: center;

							.work-item-text-icon {
								width: 14px;
								flex: 0 0 14px;
								font-size: 14px;
								margin-right: 3px;
							}

							.work-item-text-box {
								flex: 1;
								min-width: 0;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
						}

						.work-item-frequency-text {
							flex: 0.6;
							padding-right: 0px;
						}
					}

					.work-item-date {
						font-size: 11px;
						color: rgba(0, 0, 0, 0.43);
						margin-top: 10px;
					}

					.work-item-content-header {
						display: flex;
						margin-top: 15px;


						.work-item-right-content {
							flex: 1;
							min-width: 0;

							.work-item-title {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.word-item-title-text {
									flex: 1;
									min-width: 0;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									font-size: 14px;
									color: #000;
								}
							}


						}
					}



					.work-item-detail-imgs {
						width: 98%;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;

						.item-detail-img-only {
							margin: 15px 10px 0 0; // 间隙为5px

							.only-item-detail-img {
								width: 200px;
							}

							.only-item-detail-video {
								position: relative;

								.tally-img {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
								}

								.play-icon-bg {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									background-color: rgba(0, 0, 0, 0.3);
									z-index: 20;

									.play-icon {
										position: absolute;
										top: 50%;
										left: 50%;
										font-size: 30px;
										color: #fff;
										margin-left: -15px;
										margin-top: -15px;
									}
								}
							}
						}

						.item-detail-img {
							// width: 80px;
							// height: 80px;
							// margin-right: 10px;
							flex: 1;
							height: 100px;
							margin: 15px 10px 0 0; // 间隙为5px
							width: calc((100% - 20px) / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
							min-width: calc((100% - 20px) / 3); // 加入这两个后每个item的宽度就生效了
							max-width: calc((100% - 20px) / 3); // 加入这两个后每个item的宽度就生效了

							.item-detail-img-style {
								width: 100%;
								height: 100%;
							}


							.item-detail-video-style {
								width: 100%;
								height: 100%;
								position: relative;

								.tally-img {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
								}

								.play-icon-bg {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									background-color: rgba(0, 0, 0, 0.3);
									z-index: 20;

									.play-icon {
										position: absolute;
										top: 50%;
										left: 50%;
										font-size: 30px;
										color: #fff;
										margin-left: -15px;
										margin-top: -15px;
									}
								}


							}

							&:nth-child(3n) {
								// 去除第3n个的margin-right
								margin-right: 0;
							}
						}
					}

					.work-item-detail-remark {
						margin-top: 15px;

						.remark {
							background-color: rgba(217, 217, 217, 0.11);
							border-radius: 4px;
							padding: 5px 10px;
							font-size: 12px;
							color: rgba(0, 0, 0, 0.8);
						}
					}
				}
			}
		}
	}
</style>
